<template>
  <div class="app-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h1>巴克什找房管理系统</h1>
      <div class="current-time">
        <i class="el-icon-clock"></i>
        当前时间：{{ currentDateTime }}
      </div>
    </div>

    <!-- 数据概览卡片区域 -->
    <div class="overview-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="overview-card">
            <div class="card-content">
              <div class="card-title">总房源数</div>
              <div class="card-value">{{ totalHouses }}</div>
              <div class="card-change">
                <i class="el-icon-arrow-up"></i>
                <span>+{{ dailyIncrease.houses }} 今日新增</span>
              </div>
            </div>
            <div class="card-icon house-icon">
              <i class="el-icon-home"></i>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="overview-card">
            <div class="card-content">
              <div class="card-title">注册用户</div>
              <div class="card-value">{{ totalUsers }}</div>
              <div class="card-change">
                <i class="el-icon-arrow-up"></i>
                <span>+{{ dailyIncrease.users }} 今日新增</span>
              </div>
            </div>
            <div class="card-icon user-icon">
              <i class="el-icon-user"></i>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="overview-card">
            <div class="card-content">
              <div class="card-title">本月成交量</div>
              <div class="card-value">{{ monthlyDeals }}</div>
              <div class="card-change">
                <i class="el-icon-arrow-up"></i>
                <span>{{ dealGrowthRate }}% 环比增长</span>
              </div>
            </div>
            <div class="card-icon deal-icon">
              <i class="el-icon-sold-out"></i>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="overview-card">
            <div class="card-content">
              <div class="card-title">待处理事项</div>
              <div class="card-value">{{ pendingTasks }}</div>
              <div class="card-change">
                <i class="el-icon-arrow-up"></i>
                <span>+{{ dailyIncrease.tasks }} 今日新增</span>
              </div>
            </div>
            <div class="card-icon task-icon">
              <i class="el-icon-document"></i>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 最近动态和待处理事项 -->
    <div class="recent-section">
      <el-row :gutter="20">
        <el-col :xs="24" :lg="12">
          <div class="info-card">
            <div class="card-header">
              <div class="card-title">最近动态</div>
              <el-button type="text" size="small" class="view-more">查看更多</el-button>
            </div>
            <div class="card-body">
              <el-timeline>
                <el-timeline-item v-for="(item, index) in recentActivities" :key="index" :timestamp="item.time">
                  <el-card>
                    <div class="activity-content">{{ item.content }}</div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :lg="12">
          <div class="info-card">
            <div class="card-header">
              <div class="card-title">待处理事项</div>
              <el-button type="text" size="small" class="view-more">查看更多</el-button>
            </div>
            <div class="card-body">
              <el-table :data="pendingItems" :show-header="false" style="width: 100%">
                <el-table-column prop="status" width="60">
                  <template slot-scope="scope">
                    <el-badge :value="scope.row.status" :type="scope.row.status === '紧急' ? 'danger' : 'warning'"></el-badge>
                  </template>
                </el-table-column>
                <el-table-column prop="title">
                  <template slot-scope="scope">
                    <div class="task-title">{{ scope.row.title }}</div>
                    <div class="task-deadline">{{ scope.row.deadline }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindHouseDashboard',
  data() {
    return {
      // 当前时间
      currentDateTime: '',
      // 概览数据 - 默认值确保页面加载时即可显示
      totalHouses: 6500,
      totalUsers: 12500,
      monthlyDeals: 550,
      pendingTasks: 25,
      dailyIncrease: {
        houses: 30,
        users: 65,
        tasks: 12
      },
      dealGrowthRate: 12.5,

      // 最近动态 - 默认值确保页面加载时即可显示
      recentActivities: [
        { content: '用户 张三 完成注册', time: '10分钟前' },
        { content: '房源 朝阳88花园-A15 信息已更新', time: '30分钟前' },
        { content: '客户 李四 预约看房 海淀123家园-B08', time: '1小时前' },
        { content: '客户 王五 咨询房源 通州56苑-C22', time: '1小时前' },
        { content: '房源 丰台77小区-D09 审核通过', time: '2小时前' },
        { content: '房源 昌平34里-E11 已完成合同签订', time: '2小时前' }
      ],
      // 待处理事项 - 默认值确保页面加载时即可显示
      pendingItems: [
        { title: '房源审核 (5项)', deadline: '剩余3天', status: '待处理' },
        { title: '客户投诉处理 (2项)', deadline: '剩余1天', status: '紧急' },
        { title: '合同文件审核 (7项)', deadline: '剩余5天', status: '待处理' },
        { title: '房源图片更新 (3项)', deadline: '剩余2天', status: '待处理' },
        { title: '价格调整申请 (4项)', deadline: '剩余4天', status: '待处理' }
      ]
    }
  },
  mounted() {
      // 初始化数据
      this.initMockData();
      // 设置时钟
      this.updateDateTime();
      setInterval(() => {
        this.updateDateTime();
      }, 1000);
    },
  methods: {
    // 生成随机数辅助函数
    randomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    randomFloat(min, max, decimals = 1) {
      return parseFloat((Math.random() * (max - min) + min).toFixed(decimals));
    },
    // 更新当前时间
    updateDateTime() {
      const now = new Date();
      this.currentDateTime = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      }).replace(/\//g, '-');
    },
    // 初始化模拟数据
    initMockData() {
      
      // 基础数据
      this.totalHouses = this.randomInt(5000, 8000);
      this.totalUsers = this.randomInt(10000, 15000);
      this.monthlyDeals = this.randomInt(300, 800);
      this.pendingTasks = this.randomInt(10, 50);
      
      // 日增长数据
      this.dailyIncrease.houses = this.randomInt(10, 50);
      this.dailyIncrease.users = this.randomInt(30, 100);
      this.dailyIncrease.tasks = this.randomInt(5, 20);
      
      // 增长比例
      this.dealGrowthRate = this.randomFloat(3, 20);
      
      // 生成最近动态
      this.recentActivities = this.generateRecentActivities();
      
      // 生成待处理事项
      this.pendingItems = this.generatePendingItems();
    },
    // 生成最近动态
    generateRecentActivities() {
      const activities = [];
      const activityTypes = [
        '新用户注册',
        '房源信息更新',
        '预约看房',
        '客户咨询',
        '房源审核通过',
        '合同签订'
      ];
      
      // 生成随机时间范围的活动，不依赖当前时间
      const timeRanges = ['5分钟前', '10分钟前', '15分钟前', '30分钟前', '1小时前', '2小时前'];
      
      for (let i = 0; i < 6; i++) {
        const typeIndex = this.randomInt(0, activityTypes.length - 1);
        const type = activityTypes[typeIndex];
        const timeIndex = this.randomInt(0, timeRanges.length - 1);
        const time = timeRanges[timeIndex];
        
        let content = '';
        switch (type) {
          case '新用户注册':
            content = `用户 ${this.generateRandomName()} 完成注册`;
            break;
          case '房源信息更新':
            content = `房源 ${this.generateRandomHouseNo()} 信息已更新`;
            break;
          case '预约看房':
            content = `客户 ${this.generateRandomName()} 预约看房 ${this.generateRandomHouseNo()}`;
            break;
          case '客户咨询':
            content = `客户 ${this.generateRandomName()} 咨询房源 ${this.generateRandomHouseNo()}`;
            break;
          case '房源审核通过':
            content = `房源 ${this.generateRandomHouseNo()} 审核通过`;
            break;
          case '合同签订':
            content = `房源 ${this.generateRandomHouseNo()} 已完成合同签订`;
            break;
        }
        
        activities.push({
          content: content,
          time: time
        });
      }
      
      return activities;
    },
    // 生成待处理事项
    generatePendingItems() {
      const items = [];
      const taskTypes = [
        '房源审核',
        '客户投诉处理',
        '合同文件审核',
        '房源图片更新',
        '价格调整申请',
        '新用户信息核实'
      ];
      
      for (let i = 0; i < 5; i++) {
        const typeIndex = this.randomInt(0, taskTypes.length - 1);
        const days = this.randomInt(1, 7);
        const isUrgent = this.randomInt(0, 10) > 7;
        
        items.push({
          title: `${taskTypes[typeIndex]} (${this.randomInt(1, 10)}项)`,
          deadline: `剩余${days}天`,
          status: isUrgent ? '紧急' : '待处理'
        });
      }
      
      return items;
    },
    // 生成随机姓名
    generateRandomName() {
      const firstNames = ['张', '王', '李', '赵', '刘', '陈', '杨', '黄', '周', '吴', '徐', '孙', '胡', '朱', '高', '林', '何', '郭', '马'];
      const lastNames = ['伟', '芳', '娜', '秀英', '敏', '静', '强', '磊', '军', '洋', '勇', '杰', '丽', '涛', '艳', '明', '超', '秀兰', '霞', '平'];
      return firstNames[this.randomInt(0, firstNames.length - 1)] + lastNames[this.randomInt(0, lastNames.length - 1)];
    },
    // 生成随机房号
    generateRandomHouseNo() {
      const districts = ['朝阳', '海淀', '丰台', '石景山', '通州', '顺义', '昌平', '大兴', '房山', '门头沟'];
      const communities = ['花园', '家园', '小区', '公寓', '苑', '里', '庄', '居', '庭', '阁'];
      return `${districts[this.randomInt(0, districts.length - 1)]}${this.randomInt(1, 200)}${communities[this.randomInt(0, communities.length - 1)]}-${this.randomInt(1, 30)}${String.fromCharCode(65 + this.randomInt(0, 25))}`;
    },
    

  }
}
</script>

<style lang="scss" scoped>
// 全局样式重置
* {
  box-sizing: border-box;
}

.app-container {
  padding: 20px;
  min-height: 100vh;
  background: transparent;
}

// 页面标题样式
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  
  h1 {
    font-size: 24px;
    color: #303133;
    font-weight: 600;
    margin: 0;
  }
  
  .current-time {
    font-size: 14px;
    color: #606266;
  }
}

// 数据概览卡片样式
.overview-section {
  margin-bottom: 30px;
}

.overview-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
  
  .card-content {
    flex: 1;
    
    .card-title {
      font-size: 14px;
      color: #606266;
      margin-bottom: 8px;
    }
    
    .card-value {
      font-size: 28px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 8px;
    }
    
    .card-change {
      font-size: 12px;
      color: #67C23A;
      
      i {
        margin-right: 4px;
      }
    }
  }
  
  .card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    
    &.house-icon {
      background: rgba(255, 99, 132, 0.1);
      color: #FF6384;
    }
    
    &.user-icon {
      background: rgba(54, 162, 235, 0.1);
      color: #36A2EB;
    }
    
    &.deal-icon {
      background: rgba(255, 206, 86, 0.1);
      color: #FFCE56;
    }
    
    &.task-icon {
      background: rgba(75, 192, 192, 0.1);
      color: #4BC0C0;
    }
  }
}

// 最近动态和待处理事项样式
.recent-section {
  margin-bottom: 30px;
}

.info-card {
  padding: 20px;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .card-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
    
    .view-more {
      color: #606266;
      font-size: 14px;
      
      &:hover {
        color: #409EFF;
      }
    }
  }
  
  .card-body {
    // 时间线样式
    .el-timeline-item {
      margin-bottom: 15px;
      
      .el-card {
        background: transparent;
        border: 1px solid #EBEEF5;
        border-radius: 8px;
        
        .activity-content {
          font-size: 14px;
          color: #606266;
          padding: 12px;
        }
      }
      
      .el-timeline-item__timestamp {
        font-size: 12px;
        color: #909399;
        margin-top: 4px;
      }
    }
    
    // 待办事项表格样式
    .el-table {
      background: transparent;
      
      .el-table__row {
        height: 60px;
        
        .task-title {
          font-size: 14px;
          color: #303133;
          margin-bottom: 4px;
        }
        
        .task-deadline {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>
